/*
 * 新增品牌的系列
 * @Author: zfx
 * @Date: 2018-09-04 14:00:07
 */
<style lang='less' rel="stylesheet/less" type="text/less">
    .v-customer-product-brand-series-create {
		min-height: 600px;
		.brand-series-form {
            width: 380px;
		}
		.ivu-form-item {
			margin-bottom: 25px;
		}
    }
</style>
<template>
	<div class="v-customer-product-brand-series-create">
		<Row
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="110"
					class="brand-series-form"
					name="create-form">

					<!-- 品牌 -->
					<Form-item
						:label="$t('brand_series.brand')"
						prop="brand_id">
						<Select
							v-model="formValidate.brand_id"
							:placeholder="$t('common.placeholder',{'field':$t('brand_series.brand')})"
							clearable
							filterable
							transfer>
							<Option
								v-for="brand in brands"
								:value="String(brand.id)"
								:key="brand.id">{{ brand.name }}</Option>
						</Select>
					</Form-item>

					<Form-item
						:label="$t('brand_series.name')"
						prop="name">
						<i-input
							v-model="formValidate.name"
							:placeholder="$t('common.placeholder',{'field':$t('brand_series.name')})"
							name="create-name"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('common.sort')"
						prop="sort">
						<InputNumber
							:max="100000"
							:min="0"
							v-model="formValidate.sort"
							:placeholder="$t('common.placeholder',{'field':$t('common.sort')})"/>
					</Form-item>

					<!-- 缩略图 -->
					<Form-item
						:label="$t('brand_series.image')"
						prop="image">
						<Uploader
							ref="image"
							@on-remove="(file)=>{handleRemove('image',file)}"
							@on-change="(file)=>{handleChange('image',file)}">
							{{ $t('brand_series.pic_tip') }}
						</Uploader>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('common.submit') }}
						</Button>

						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>

					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

import Uploader from 'src/views/component/Uploader';
import { validateImage } from 'src/validate'; // 引入校验文件

export default {

	name: 'BrandSeriesCreate',
	components: {
		Uploader,
	},
	props: {
		brands: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			formValidate: {
				brand_id: '', // 品牌id
				name: '', // 系列名称
				sort: 0, // 优先级
				image: '',	// 系列图
			}, // 新建系列时的表单

			ruleValidate: { // 表单验证规则
				brand_id: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('brand_series.brand') }),
						trigger: 'blur,change',
					},
				],
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('brand_series.name') }),
						trigger: 'blur,change',
					},
				],
				sort: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('common.sort') }),
						trigger: 'blur,change',
					},
				],
				image: [
					{
						required: true,
						validator: validateImage,
						trigger: 'blur,change',
					},
				],
			},

		};
	},

	methods: {
		/**
         * 提交表单
         * @param  {string} name {表单上对应的ref值}
         * @return {undefined}
         */
		handleSubmit(name) {
			if (this.loading) return;
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.formDataCreate();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单上对应的ref值}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs.image.reset();
			this.$refs[name].resetFields();
		},

		/**
		 * 选择图片
		 * @param {Object} file {选择的文件对象集合}
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleChange(field, { file }) {
			this.formValidate[field] = file;
			this.$refs.formValidate.validateField(field);
		},

		/**
		 * 删除图片
		 * @param {String} filed {icon}
		 * @return {undefined}
		 */
		handleRemove(field) {
			this.formValidate[field] = null;
			this.$refs.formValidate.validateField(field);
		},

		/**
         * 手动拼接表单数据
         * @return {Object} {拼接好的表单数据}
         */
		formDataCreate() {
			const new_object = {
				brand_id: this.formValidate.brand_id,
				name: this.formValidate.name,
				sort: this.formValidate.sort,
				image: this.formValidate.image,
			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});

			this.$emit('post', form_data);
		},
	},
};

</script>
